#layout-hierarchy,
#layout-attributes-secondary {
    border-left: 1px solid $bcg-darker;

    &.pcui-collapsed {
        .hierarchy-controls {
            display: none;
        }
    }

    .pcui-panel-content > .advanced-search-container {
        display: flex;
        flex-direction: column;
        position: sticky;
        z-index: 2;
        left: 0;
        top: 0;

        &.showing {
            min-height: 229px;
        }

        >.advanced-search-filter-container {
            border-bottom: 1px solid #20292b;
            border-top: 1px solid #20292b;
            background-color: #20292b;
            padding-bottom: 7px;

            >.advanced-search-label-toggle {
                justify-content: space-between;
                flex-direction: row;
                height: 30px;

                &::before {
                    content: attr(text-hover);
                    visibility: hidden;
                    opacity: 0;
                    width: 140px;
                    background-color: $bcg-primary;
                    color: #fff;
                    text-align: center;
                    border-radius: 5px;
                    padding: 5px 0;
                    position: absolute;
                    z-index: 1;
                    right: 0;
                    top: 110%;
                    font-size: 11px;
                }

                &:hover::before {
                    opacity: 0.8;
                    visibility: visible;
                }

                >.advanced-search-label-toggle-text {
                    color: #fff;
                    font-style: normal;
                    font-weight: 700;
                    font-size: 12px;
                    line-height: 12px;
                    font-family: 'Proxima Nova Bold';
                    letter-spacing: 0.2px;
                    text-transform: capitalize;
                }
            }

            >.advanced-search-label-filter {
                justify-content: flex-end;
                flex-direction: row-reverse;
                min-height: 30px;
                margin: 0 0 0 8px;
                cursor: pointer;

                >.advanced-search-label-filter-text {
                    color: #fff;
                    font-style: normal;
                    font-weight: 400;
                    font-size: 12px;
                    line-height: 14px;
                    margin: 0 0 0 8px;
                    width: auto !important;
                }

                >.advanced-search-label-filter-checkbox {
                    margin: 0;
                    box-shadow: none;

                    &.checked {
                        background-color: #fff;
                    }
                }
            }

            >.advanced-search-label-search-by {
                height: 30px;

                .advanced-search-search-by-text {
                    color: #fff;
                    font-style: normal;
                    font-weight: 700;
                    font-size: 12px;
                    line-height: 16px;
                    font-family: 'Proxima Nova Bold';
                    letter-spacing: 0.2px;
                    text-transform: capitalize;
                }

                >.advanced-search-select-all-button {
                    font-style: normal;
                    font-weight: 400;
                    font-size: 11px;
                    line-height: 22px;
                    display: flex;
                    text-align: end;
                    flex-direction: column;
                    cursor: pointer;

                    &.active,
                    &:hover,
                    &:focus,
                    &.focus {
                        color: aliceblue;
                    }
                }
            }
        }

        >.advanced-search-bar {
            display: flex;
            flex-direction: row;
            min-height: 30px;
            background-color: #293538;
            border-top: 1px solid #364346;

            &:hover {
                background-color: #20292b;
                border-top: 1px solid #293538;
            }

            &.activated {
                background-color: #20292b;
                border-top: 1px solid #293538;
            }

            >.pcui-input-element.search {
                margin: 0;
                width: 100%;
                height: 30px;
                border: none;
                box-shadow: none;
                border-radius: 0;
                background-color: inherit;
                transition: none;

                &.active,
                &:hover,
                &:focus,
                &.focus {
                    &::before {
                        content: '';
                        padding: 0;
                    }

                    &::after {
                        content: '';
                    }
                }

                > input {
                    font-style: normal;
                    font-weight: 400;
                    font-size: 14px;
                    line-height: 14px;
                    font-family: 'Proxima Nova Regular';
                    padding: 0;
                }

                &::before {
                    content: 'Search';
                    position: absolute;
                    font-style: normal;
                    font-weight: 400;
                    font-size: 14px;
                    line-height: 14px;
                    padding: 8px 0;
                    color: #9ba1a3;
                }

                &.not-empty::before {
                    padding: 0;
                    content: '';
                }

                &.not-empty {
                    > input.field {
                        color: $text-active;
                    }

                    > .clear {
                        display: block;
                    }

                    &::after {
                        content: '';
                    }
                }

                > .clear {
                    display: none;
                    position: absolute;
                    top: 2px;
                    right: 17px;
                    width: 8px;
                    height: 8px;
                    color: #fff;

                    @extend .font-icon;

                    font-size: 18px;
                    text-align: center;
                    cursor: pointer;
                }
            }

            >.toggle-filters {
                display: flex;
                align-items: center;
                justify-content: center;
                min-width: 38px;

                @extend .font-icon;

                font-size: 18px;
                cursor: pointer;
                color: #b1b8ba;

                &.active,
                &:hover,
                &:focus,
                &.focus {
                    color: white;
                }

                &.showing {
                    color: white;
                }

                &::before {
                    content: '\E129';
                    left: 5px;
                    position: absolute;
                }

                &::after {
                    content: '\E159';
                    position: absolute;
                    left: 20px;
                    top: 7px;
                    font-size: 11px;
                }
            }
        }
    }

    > .pcui-panel-content {
        > .search-results {
            margin: 2px;
            border: none;
            background-color: $bcg-primary;
            overflow-y: auto;

            &:focus {
                outline: none;
                border: none;
            }

            > .ui-list-item {
                @extend .font-regular;

                font-size: 14px;
                height: 24px;
                line-height: 22px;
                padding: 0 5px;
                border: none;

                &::before {
                    content: '\E185';
                    padding-right: 6px;
                    line-height: 24px;

                    @extend .font-icon;

                    font-size: 14px;
                    text-align: center;
                    background-color: transparent;
                    color: $text-darkest;
                }

                &:hover {
                    background-color: $bcg-dark;

                    &::before {
                        color: $text-primary;
                    }
                }

                &.selected {
                    background-color: $bcg-darkest;

                    &::before {
                        color: $text-primary;
                    }
                }

                &.disabled {
                    opacity: 1;

                    > span {
                        opacity: 0.4;
                    }
                }

                &.container::before {
                    content: '\E139';
                }

                &.c-script::before {
                    content: '\E236';
                }

                &.c-model::before {
                    content: '\E188';
                }

                &.c-animation::before {
                    content: '\E198';
                }

                &.c-audiosource::before {
                    content: '\E197';
                }

                &.c-sound::before {
                    content: '\E197';
                }

                &.c-collision::before {
                    content: '\E187';
                }

                &.c-rigidbody::before {
                    content: '\E189';
                }

                &.c-particlesystem::before {
                    content: '\E199';
                }

                &.c-light::before {
                    content: '\E194';
                }

                &.c-audiolistener::before {
                    content: '\E196';
                }

                &.c-camera::before {
                    content: '\E212';
                }

                &.c-screen::before {
                    content: '\E141';
                }

                &.c-sprite::before {
                    content: '\E395';
                }

                &.template-instance::before {
                    content: '\E411';
                }

                &c.gsplat::before {
                    content: '\E217';
                }
            }
        }
    }

    .pcui-container.progress-overlay {
        z-index: 10;
        position: absolute;
        inset: 0;
        background-color: $bcg-primary;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        opacity: 1;
        visibility: visible;
        transition: visibility 100ms, opacity 100ms;

        &.pcui-hidden {
            visibility: hidden;
            opacity: 0;
            display: inherit;
        }

        > .pcui-progress {
            flex-basis: 128px;
        }
    }
}

.pcui-container.hierarchy-controls {
    > .pcui-button {
        width: 28px;
        padding: 0;
        margin: 2px;
    }
}
